<script setup lang="ts">
import { ref, onMounted } from "vue";
import ChooseStore from "./ChooseStore.vue";
import { useColumns } from "../../utils/columns";
const { brandColumns } = useColumns();

const props = defineProps({
  showStoreIds: {
    type: Array,
    default: () => []
  }
});

const choseStoreRef = ref();
const batchStorePrice = ref([
  {
    storeBuyPrice: "",
    storeSalePrice: "",
    score: "",
    discountSalePrice: "",
    discountScore: ""
  }
]);

// 获取数据
const getBatchUpPriceData = () => {
  return {
    upStoreList: choseStoreRef.value.getChoseStoreList(),
    ...batchStorePrice.value[0]
  };
};
defineExpose({ getBatchUpPriceData });
</script>

<template>
  <div class="w-full pl-[20px] mb-[30px]">
    <div class="cell">
      <div class="c-title">选择门店</div>
      <ChooseStore ref="choseStoreRef" :showStoreIds="showStoreIds" />
    </div>
    <div class="cell">
      <div class="c-title">修改价格</div>
      <div class="price-table">
        <pure-table
          row-key="id"
          align-whole="center"
          :header-cell-style="{
            color: 'var(--el-text-color-primary)'
          }"
          :data="batchStorePrice"
          :columns="brandColumns.slice(3)"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cell {
  .c-title {
    color: #000;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .price-table {
    border: 1px solid #efefef;
    border-radius: 5px;
  }
}
</style>
